<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="title" v-if="item.isMust ==='0'">{{item.questionName}}</view>
			<view class="question" v-else>
				<view class="q-title">{{item.sn}}、{{item.questionName}}</view>
				<view class="q-answer">
					<view class="answer">
						<radio-group name="radio" @change="selectAns($event, item)">
							<label v-for="(ans, ansIndex) in answerList" :key="ansIndex">
								<radio :value="ans.optionValue" /><text>{{ans.optionName}}</text>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit" @click="submit">提交</view>
		
	</view>
</template>

<script>
	import data from './data'
	console.log("data", data)
	export default {
		data() {
			return {
				list: [],
				answerList: []
			}
		},
		onLoad() {
			let list = data.data.questionList
			let processList = []
			let num = 0
			list.forEach(item => {
				item.val = -1
				if (item.isMust === '0') {
					item.sn = ''
				} else {
					num += 1
					item.sn = num
				}
				processList.push(item)
			})
			this.list = processList
			this.answerList = data.data.reviewAnswerVOList
		},
		methods: {
			selectAns(e, item){
				console.log("fdsafs",e, item);
				item.val=e.detail.value
			},
			submit(){
				//数据非空校验
				let flag=0
				//处理数据
				let reqData=[]
				for (let item of this.list) {
					console.log("item",item);
					if(item.val===-1 && item.isMust==='1'){
						uni.showToast({
							icon: 'error',
							title: `第${item.sn}题不能为空!`
						})
						flag=1
						break;
					}
					reqData.push({
						id: item.questionId,
						questionName: item.questionName,
						score: item.val
					})
				}
				
				if(flag)return
				
				console.log("提交的数据为:", reqData);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-bottom: 15px;

		.title {
			font-size: 16px;
			font-weight: bold;
			padding: 10px 0;
			border-bottom: 1px solid red;
		}

		.question {

			.q-answer {
				padding: 10px;

				.answer {
					padding-top: 10px;
				}
			}
		}
	}
</style>